<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>会员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/css/font.css" />
  <link rel="stylesheet" href="../../static/css/weadmin.css" />
</head>
<style>
  td {
    font-size: 12px !important;
  }

  .black_over {
    /* display: none; */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000c7;
    z-index: 999;
    opacity: 0.6;
    filter: alpha(opacity=50);
  }

  .zzc {
    background-color: #fff;
    width: 400px;
    height: 550px;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    /* border-radius: 5px; */
    /* border: 1px solid #000; */
  }

  .select {
    padding-right: 20px !important;
  }
  .img_style{
    width: 200px;
    height: 200px;
  }
</style>

<body>
  <div class="weadmin-nav">
    <span class="layui-breadcrumb">
      <!-- <a href="javascript:;">首页</a> <a href="javascript:;">账号管理</a> -->
      <a href="javascript:;"> <cite>反馈中心列表管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
      href="javascript:location.replace(location.href);" title="刷新">
      <i class="layui-icon layui-icon-refresh"></i>
    </a>
  </div>

  <div class="weadmin-body" id="app">
    <!-- <div class="layui-row">
      搜索：
      &nbsp;&nbsp;&nbsp;
      <div class="layui-inline">
        <input type="text" v-model="name" name="username" placeholder="输入类型，账号，邮箱" autocomplete="off"
          class="layui-input" />
      </div>
      <button class="layui-btn" @click="search()">搜索</button>
      </input>
    </div> -->
    <div class="weadmin-block">
      <button class="layui-btn layui-btn-danger" @click="del_all()">
        <i class="layui-icon layui-icon-delete"></i>批量删除
      </button>
      <!-- <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html',600,400)"> -->
      <input type="file" id="file" @change="add_excel_change($event)" style="display:none;"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
      <!-- <span class="fr" style="line-height:40px">共有数据：88 条</span> -->
    </div>
    <table class="layui-table" id="memberList">
      <thead>
        <tr>
          <th>
            <div
              :class="{'layui-unselect':true,'header':true,'layui-form-checkbox':true,'layui-form-checked':check.length==list.length}"
              lay-skin="primary" @click="select_all">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </th>
          <th>ID</th>
          <th>邀请码</th>
          <th>账号</th>
          <th>邮箱</th>
          <th>文本</th>
          <th>操作</th>
 
        </tr>
      </thead>
      <!-- 表格主体 -->
      <div v-if="list.length!=0">
        <!-- 0 -->
        <tr v-for="(item,index) in list">
          <td>
            <div @click="select(index)"
              :class="{'layui-form-checked':check.includes(index),'layui-unselect':true,'layui-form-checkbox':true}"
              lay-skin="primary">
              <i class="layui-icon layui-icon-ok"></i>
            </div>
          </td>
          <td>{{item.guideid}}</td>
          <td>{{item.invCode}}</td>
          <td>{{item.AccountName}}</td>
          <td>{{item.MailboxName}}</td>
          <td>{{item.guidetext}}</td>

     
          <td class="td-manage">


            <a title="删除" @click="del(index)">
              <i class="layui-icon layui-icon-delete"></i>
            </a>
          </td>
        </tr>
      </div>
    </table>
    <!-- 页数 -->
    <div class="page">
      <div>
        <a class="prev" href="#" @click="add_page">&lt;&lt;上一页</a>
        <!-- <a class="num" href="#">1</a>
        <span class="current">2</span> 
        <a class="num" href="#">...</a>
        <a class="num" href="#">489</a>  -->
        <a class="next" href="#" @click="cut_page">下一页&gt;&gt;</a>
      </div>
    </div>
    <!-- <div>
      <ul>
        <li v-for="(item,index) in list">{{index}}</li>
      </ul>
    </div> -->
    <!-- //遮罩层 -->
    <div class="black_over" v-show="zzc_show&&zzc_show_create"></div>
    <!-- 弹窗 修改添加-->
    <div class="zzc" v-show="zzc_show">
      <div class="weadmin-body">
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
            <span class="we-red">*</span>文本
          </label>
          <div class="layui-input-inline">
            <input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off"
              class="layui-input" v-model="guidetext">
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
            <span class="we-red">*</span>超链接
          </label>
          <div class="layui-input-inline">
            <input type="text" id="L_username" name="username" lay-verify="required|nikename" autocomplete="off"
              class="layui-input" v-model="url">
          </div>
        </div>
        <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
          </label>
          <div class="layui-input-inline">
            <img :src="guidePath"  class="img_style" alt="" v-show="guidePath!=''">
            <!-- <img class="img_style" src="http://10.193.78.171:80/img/20200925215424111.jpg" alt=""> -->
            <br>
          <button class="layui-btn" @click="add_img">图片上传</button>
          <input type="file" multiple  accept='image/*' style="display: none;" id="img"
                @change="update_img($event)">
            
          </div>
        </div>
        

        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <button class="layui-btn" @click="add_form">确定</button>
          <button class="layui-btn" @click="close()">取消</button>
        </div>
      </div>
    </div>

  

  </div>
  <script src="../../lib/layui/layui.js" type="text/javascript"></script>
  <script src="../../static/js/eleDel.js" type="text/javascript"></script>
  <script src="../../lib/vue.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="../../lib/jquery-3.4.1.min.js"></script>
  <script src="../../lib/xlsx.core.min.js"></script>
  <!-- <script src="../public/libs/vant.js"></script> -->
  <script src="../../lib/app.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        zzc_show: false,//添加修改遮罩层
        zzc_show_create: false,//生成邀请码遮罩
        list: [1, 2, 3, 4],
        check: [],//已选
        page: 1,//当前页数
        page_size: 100,
        pages: 1,//总页数
        type: "",//搜索类型
        name: "",//搜索字符串
        type2: "",//添加修改类型
        type_list: [],
        // 添加修改数据
        AccountType: "",

        "guidetext": "",
        "guidePath": "",
        "pathType": 1,
        "invCode": "",
        "url": " ",
        //生成邀请码参数
        BuyMoney: "",
        InvitationDays: "",
        count: "",

        guideid: "",//当前修改id
        // 修改数据框显示
        select_AccountType: -1,
        buttontype: "",//确定按钮类型 add update
        num: 0,//表格导入计数
        create_type: 0,//是否批量导入0否
      },
      methods: {
        //获取列表
        get_page: function () {
          var data = {
            pageNum: this.page,
            pageSize: this.page_size,
            name: this.name,
            pathType:this.pathType
            // type:this.type
          }
          // if (this.type != -1) {
          //   data.type = this.type
          // }
          $.ajax({
            url: app.webUrl + '/bacGuide/BacGuidesel',
            type: 'post',
            data: data,
            success: function (ret) {
              if (ret.status == 1) {
                vm.list = ret.data.list;
                console.log(vm.list);
                vm.pages = ret.data.pages;
                vm.page++
              } else {

              }
            }
          });
        },
        //删除
        del: function (index) {
          var guideid = this.list[index].guideid;
          layer.confirm('确定删除吗', {
            btn: ['确定', '取消'] //可以无限个按钮
            , btn2: function (index, layero) {
              // console.log(2);
            }
          }, function (index, layero) {
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/bacGuide/delguid',
              type: 'post',
              data: { guideid: guideid },
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('删除成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                } else {

                }
              }
            });
          });

        },
        //批量删除
        del_all: function () {
          // console.log(this.check);
          var data = []
          this.check.forEach(element => {
            // console.log(element);
            data.push(vm.list[element].guideid)
          });
          var check = JSON.stringify(data)
          console.log(check);
          layer.confirm('确定删除吗', {
            btn: ['确定', '取消'] //可以无限个按钮
            , btn2: function (index, layero) {
              // console.log(2);
            }
          }, function (index, layero) {
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/bacGuide/delguidAll',
              type: 'post',
              data: { guideid: check },
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('删除成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                } else {

                }
              }
            });
          });
        },


        //选择全部
        select_all: function () {
          if (this.check.length == 0) {
            var len = this.check.length;
            this.check = [];
            for (var i = 0; i < this.list.length; i++) {
              this.check.push(i);
            }
          } else {
            this.check = [];
          }
          // console.log(this.check.length);
        },
        //选择
        select: function (index) {
          var idx = this.check.indexOf(index);
          // console.log(idx);
          //如果已经选中了，那就取消选中，如果没有，则选中
          if (idx != -1) {
            this.check.splice(idx, 1);
          } else {
            this.check.push(index);
          }
        },
        //关闭弹窗
        close: function () {
          this.zzc_show = false;
          this.zzc_show_create = false;
        },
        // 添加弹窗
        add: function () {
          this.AccountType = ""
          this.guidetext = ""
          this.guidePath = ""
          this.invCode = ""
          this.url = ""

          //
          this.buttontype = "add";
          this.zzc_show = true;

        },
        //表格导入
        add_excel: function () {
          document.getElementById('file').click();
        },
        //表格添加
        add_excel_change: function (e) {
          var files = e.target.files;
          if (files.length == 0) return;
          var f = files[0];
          if (!/\.xlsx$/g.test(f.name)) {
            alert('仅支持读取xlsx格式！');
            return;
          }
          this.readWorkbookFromLocalFile(f, function (workbook) {
            // console.log(workbook);
            vm.num = 0
            vm.readWorkbook(workbook);
          });
        },
        readWorkbookFromLocalFile: function (file, callback) {
          var reader = new FileReader();
          reader.onload = function (e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, { type: 'binary' });
            if (callback) callback(workbook);
          };
          reader.readAsBinaryString(file);
        },
        readWorkbook: function (workbook) {
          var sheetNames = workbook.SheetNames; // 工作表名称集合
          var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
          // var csv = XLSX.utils.sheet_to_csv(worksheet);
          // console.log(csv);
          var json = XLSX.utils.sheet_to_json(worksheet);
          json = JSON.stringify(json)
          if (vm.num != 0) { return }
          // console.log(111);
          // console.log(json);
          $.ajax({
            url: app.webUrl + "/bacaccount/bacAccaddAll",
            type: 'post',
            data: json,
            contentType: 'application/json',
            dataType: "json",
            success: function (ret) {
              if (ret.status == 1) {
                layer.msg('操作成功', {
                  icon: 1
                });
                vm.page = 1;
                vm.get_page();
                vm.close();
              } else {

              }
            }
          });
          console.log(json);
          // document.getElementById('result').innerHTML = csv2table(csv);
        },
        //结束
        //添加 或者修改提交
        add_form: function () {
          // var type2 = document.getElementById("type2").value;
          // if (type2 == (-1)) {
          //   layer.msg('请选择类型', { icon: 1 });
          //   return
          // }
          // console.log(type2);
          var data = {
            guidePath: this.guidePath,
            guidetext: this.guidetext,
            invCode: this.invCode,
            url: this.url,

            AccountType: this.AccountType,
          }
          var url = ""
          if (this.buttontype == "add") {

            url = "/bacGuide/upguideservice"
          } else {
            data.guideid = this.guideid
            url = "/bacGuide/BacGuideupdate"
          }
          // var data = {
          //   AccountType: type2,
          //   numberDays: this.numberDays,
          //   price: this.price
          // }
          $.ajax({
            url: app.webUrl + url,
            type: 'post',
            data: data,
            success: function (ret) {
              if (ret.status == 1) {
                layer.msg('操作成功', {
                  icon: 1
                });
                vm.page = 1;
                vm.get_page();
                vm.close();

              } else {

              }
            }
          });

        },
        //修改
        update_show: function (index) {
          this.guideid = this.list[index].guideid;
          // document.getElementById("type2").value = this.list[index].accountType
          //参数 默认
          this.AccountType = this.list[index].AccountType
          this.guidePath = this.list[index].guidePath
          this.guidetext = this.list[index].guidetext
          this.invCode = this.list[index].invCode
          this.url = this.list[index].url
          //弹窗
          this.zzc_show = true;
          this.buttontype = "update";

        },
        // 修改提交
        // update_form: function () {

        // },
        //搜索
        search: function () {
          // var type = document.getElementById("type").value;
          this.page = 1;
          // this.type = type;
          this.get_page();

        },
        //上一页
        add_page: function () {
          // console.log(this.page);
          if (this.page <= 2) {
            layer.msg('已经到头了', {
              icon: 2
            });
          } else {
            this.page = this.page - 2;
            this.get_page();
          }
        },
        //下一页
        cut_page: function () {
          if (this.page > this.pages) {
            layer.msg('已经到头了', {
              icon: 2
            });
          } else {
            // this.page++
            this.get_page();
          }
        },
        //生成邀请码弹窗
        show_create: function (index, create_type) {
          this.create_type = create_type
          if (this.check.length == 0 && this.create_type == 1) {
            layer.msg('请先选择', { icon: 1 });
            return
          }
          this.guideid = this.list[index].guideid
          this.zzc_show_create = true
        },
        //生成邀请码确定
        create_form: function (index) {
          if (this.create_type == 0) {

            var data = {
              guideid: this.guideid,
              BuyMoney: this.BuyMoney,
              InvitationDays: this.InvitationDays,
              count: this.count,
            }
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/bacaccount/BacInvcreate',
              type: 'post',
              data: data,
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('操作成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                  vm.close()
                } else {
                  layer.msg('操作失败', { icon: 1 });

                }
              }
            });
          }
          else {
            //批量生成
            // this.show_create(1);

            var data_id = []
            this.check.forEach(element => {
              // console.log(element);
              data_id.push(vm.list[element].guideid)
            });
            var check = JSON.stringify(data_id)
            var data = {
              guideid: check,
              BuyMoney: this.BuyMoney,
              InvitationDays: this.InvitationDays,
              count: this.count,
            }
            //按钮【按钮一】的回调
            $.ajax({
              url: app.webUrl + '/bacaccount/BacInvcreateAll',
              type: 'post',
              data: data,
              success: function (ret) {
                if (ret.status == 1) {
                  layer.msg('操作成功', { icon: 1 });
                  vm.page = 1;
                  vm.get_page();
                  vm.close()
                } else {
                  layer.msg('操作失败', { icon: 1 });

                }
              }
            });
          }
        },
        //添加图片按钮
        add_img:function(){
          document.getElementById("img").click();
        },
        //图片上传
        update_img:function(e){
          var dom = e.currentTarget;
          console.log(dom);
          var file = dom.files[0];
          //创建formdata对象
          var formdata = new FormData();
          formdata.append("file", file);
          // formdata.append("dir", "images");
          // this.pic_src = window.URL.createObjectURL(file);
          // $(e.currentTarget).append();
          // 上传
          $.ajax({
            url: app.webUrl + "/bacGuide/upLoadAccessory",
            type: "POST",
            data: formdata,
            processData: false,// 告诉jQuery不要去处理发送的数据
            contentType: false,
            success: function (ret) {
              if(ret.status==1){
                vm.guidePath=ret.data.url
              }
            },
          });
        },
        // create_form_all:function(){

        // },

      },
      mounted: function () {
        this.get_page();
        // this.get_type();
      },


    })

  </script>
</body>

</html>